import { Button, Form, Input, Modal } from 'antd'
import './ModalForm.less'


function ModalForm(props:any) {
  return (
    <Modal 
        open={props.showForm} 
        onCancel={props.ctrlForm}
        getContainer={false} 
      >
        <p className='formTitle'>{props.formTitle}</p>
        <Form 
          labelAlign={'left'}
          name="stuForm" 
          initialValues={{ remember: true, }} 
          autoComplete="off" 
          onFinish={props.changeStu}
        >
          <Form.Item style={{ marginBottom: 0, }}  wrapperCol={{ offset: 2, span: 20, }} >
            <Form.Item
              label="学生姓名"
              name={props.stuName}
              initialValue={props.stuNameInit}
              labelCol={{ span: 8, }}
              wrapperCol={{ span: 14, }}
              rules={[{ required: true, message: '请输入学生姓名' }]}
              style={{ display: 'inline-block', width: '50%'}}
            >
              <Input size='large'/>
            </Form.Item>
            <Form.Item
              label="学号"
              name={props.stuID}
              initialValue={props.stuIDInit}
              labelCol={{ offset:2 , span: 8, }}
              wrapperCol={{ span: 14, }}
              rules={[{ required: true, message: '请输入学号' }]}
              style={{ display: 'inline-block', width: '50%'}}
            >
              <Input size='large'  disabled={props.disabled}/>
            </Form.Item>
          </Form.Item>

          <Form.Item style={{ marginBottom: 0, }} wrapperCol={{ offset: 2, span: 20, }}>
            <Form.Item
              label="学生密码"
              name={props.stuPwd}
              initialValue={props.stuPwdInit}
              labelCol={{ span: 8, }}
              wrapperCol={{ span: 14, }}
              rules={[{ required: true, message: '请输入密码' }]}
              style={{ display: 'inline-block', width: '50%' }}
            >
              <Input.Password size='large'/>
            </Form.Item>
            <Form.Item
              label="学生账号"
              name={props.stuAccount}
              initialValue={props.stuAccountInit}
              labelCol={{ offset:2 , span: 8, }}
              wrapperCol={{ span: 14, }}
              rules={[{ required: true, message: '请输入学生账号' }]}
              style={{ display: 'inline-block', width: '50%' }}
            >
              <Input size='large'/>
            </Form.Item>
          </Form.Item>

          <Form.Item style={{ marginBottom: 0, }} wrapperCol={{ offset: 2, span: 20, }}>
            <Form.Item
              label="所属学校"
              name={props.stuSchool}
              initialValue={props.stuSchoolInit}
              labelCol={{ span: 8, }}
              wrapperCol={{ span: 14, }}
              rules={[{ required: true, message: '请输入所属学校' }]}
              style={{ display: 'inline-block', width: '50%'}}
            >
              <Input size='large'/>
            </Form.Item>
            <Form.Item
              label="所属班级"
              name={props.stuClass}
              initialValue={props.stuClassInit}
              labelCol={{ offset:2 , span: 8, }}
              wrapperCol={{ span: 14, }}
              rules={[{ required: true, message: '请输入所属班级' }]}
              style={{ display: 'inline-block', width: '50%'}}
            >
              <Input size='large'/>
            </Form.Item>
          </Form.Item>

          <Form.Item
            label="家庭住址"
            name={props.stuAddress}
            initialValue={props.stuAddressInit}
            labelCol={{ offset:2 , span:3 }}
            wrapperCol={{ span: 17, }} 
            rules={[{ required: true, message: '请输入家庭住址' }]}
          >
            <Input size='large' style={{marginLeft: '10px'}}/>
          </Form.Item>

          <Form.Item
            label="联系方式"
            name={props.stuPhone}
            initialValue={props.stuPhoneInit}
            labelCol={{ offset:2 , span:3 }}
            wrapperCol={{ span: 6, }} 
            rules={[{ required: true, message: '请输入联系方式' }]}
          >
            <Input size='large' style={{marginLeft: '10px'}}/>
          </Form.Item>

          <Form.Item wrapperCol={{  offset: 10, span: 12}} >
            <Button className='confirm' type="primary" htmlType="submit" size='large'>确认</Button>
          </Form.Item>
        </Form>
      </Modal>
  )
}

export default ModalForm